﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <form class="layui-form" id="permissionForm" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">文章标题</label>
            <div class="layui-input-block" style="width:300px">
                <input type="text" name="titlearticle" id="titlearticle" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">略缩图:</label>
                <div class="layui-input-inline layui-input-wrap">
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 图片上传
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                            <div id="ID-upload-demo-text"></div>
                            <div class="layui-progress" id="upload-progress-bar">
                                <div class="layui-progress-bar" lay-percent="0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block" style="width:300px">
                <input type="text" name="superAffiliation" id="superAffiliation" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章内容</label>
            <div class="layui-input-block" style="width:300px">
                <textarea name="articlecontent" id="articlecontent" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item" pane>
            <label class="layui-form-label">文章状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="deparstate" id="deparstate" lay-skin="switch" lay-filter="switchTest">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">上传时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="heaTime" id="heaTime" class="layui-input" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="addPermission">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['form', 'layer', 'jquery', 'laydate', 'upload'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var upload = layui.upload;
            var $ = layui.$;

            // 完善时间控件配置
            laydate.render({
                elem: '#heaTime',
                type: 'date',
                format: 'yyyy-MM-dd', // 设置日期显示格式为年-月-日
                placeholder: '请选择上传时间', // 更友好的占位符提示
                trigger: 'click', // 点击输入框触发日期选择器
                value: '', // 可以设置默认日期，这里设置为空表示没有默认日期，你可以根据需求修改
                done: function (value, date, endDate) {
                    // 日期选择完成后的回调函数
                    // 可以在这里添加一些自定义逻辑，比如检查日期格式等
                    console.log('选择的日期:', value);
                }
            });

            form.on('submit(addPermission)', function (data) {
                // 创建 FormData 对象

                var pdata = {
                    titlearticle: $("#titlearticle").val(),
                    superAffiliation: $("#superAffiliation").val(),
                    articlecontent: $("#articlecontent").val(),
                    heaTime: $("#heaTime").val(),
                    deparstate: $("#deparstate").prop('checked'),
                    heaImage: window.uploadedImageUrl || null
                };

                // 打印要发送的数据
                console.log('发送的数据:', pdata);
                console.log('发送的数据:', pdata);
                // 发送 Ajax 请求
                $.ajax({
                    url: '@ViewBag.BaseUrl/T6/HeaEncyclope',
                    data: JSON.stringify(pdata),
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code === 100) {
                            layer.msg('添加成功');
                            $('#permissionForm')[0].reset();
                            location.href = "/HeaEncyclope/GetHeaEncyclope"
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(`请求出错: ${textStatus} - ${errorThrown}`);
                        console.error('请求出错:', jqXHR, textStatus, errorThrown);
                        console.log('jqXHR 详细信息:', jqXHR);
                    }
                });

                return false;


              
            });
            // 图片上传配置
            upload.render({
                elem: '#ID-upload-demo-btn',
                url: '@ViewBag.BaseUrl/T6/Doctor/UploadFile',
                type: 'POST',
                accept: 'images', // 只接受图片文件
                exts: 'jpg|png|gif|bmp|jpeg', // 允许的图片格式
                size: 2048, // 限制图片大小为 2MB
                before: function (obj) {
                    // 显示进度条
                    $('#upload-progress-bar').show();
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result);
                    });
                },
                done: function (res) {
                    console.log(res);
                    if (res.code === 100) {
                        layer.msg('图片上传成功');
                        $('#ID-upload-demo-img').attr('src', res.data);
                        // 将上传成功的图片地址存储到全局变量，以便表单提交时使用
                        window.uploadedImageUrl = res.data;
                    } else {
                        layer.msg('图片上传失败');
                    }
                },
            });
        });

    </script>
</body>

</html>